{% extends "glgl_app/base.html" %}

{% block extracss %}
<link href="/static/css/video.css" rel="stylesheet">
<link href="/static/css/video-js.css" rel="stylesheet">

<link rel="stylesheet" type= "text/css" href="/static/css/index.css" >
<link rel="stylesheet" href="/static/css/style.css">

<link rel="stylesheet" type="text/css" href="http://cdn.gbtags.com/ztree/3.5/zTreeStyle.css">
{% endblock %}

{% block title %}审核{{ video.title }}{% endblock %}

{% block content %}
	<div class="dd-video">
		<div class="row">
			<div class="col-sm-12 col-md-8 dd-video">
				<div class="info">
					<div class="video-title"><h2>{{ video.title }}</h2></div>
					<div style="clear:both;"></div>
                    <div class="tminfo">
                        <a href="/">主页</a>&nbsp;&nbsp;&nbsp;
                        <i>播放量：{{video.play}}</i> &nbsp;&nbsp;&nbsp;
                        <i>点赞数：{{video.like}}</i>&nbsp;&nbsp;&nbsp;
                        <i>收藏数：{{video.favorite}}</i>&nbsp;&nbsp;&nbsp;
                        <i>知识点：{{ video.tag }}</i>&nbsp;&nbsp;&nbsp;<!--i标签显示斜体文本效果-->
                        <span>
                            上传时间：{{ video.time|date:"Y年m月d日" }}, 视频类型：{{ video_type }}
                        </span>
                    </div>
					<div style="clear:both;"></div>
				</div><!--视频信息-->
				<div class="player">
					<div id="video-id" style="display: none;">{{ video.pk }}</div><!--在此开源的数据库设计中没有override，所以也是video.id-->
					<video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls="controls" preload="auto" width="640" height="400" data-setup='{"playbackRates": [1, 1.5, 2]}' poster='/media/{{video.cover}}'>
						<!--
						属性controls 值为controls ：如果出现该属性，则向用户显示控件，比如播放按钮。
						属性poster 值为URL：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
						属性preload 值为preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。
						属性src没有用到，用了子标签source
						-->
                        {% if video_type == 'mp4' %}
							<source src="{{ video.video.url }}" type='video/mp4'/><!--video中的子标签-->
						{% else %}
							<source src="{{ video.video.url }}" type='video/flv'/>
						{% endif %}
						<p class="vjs-no-js"><!--video中加的文字，当视频无法正常播放时显示-->
							To view this video please enable JavaScript, and consider upgrading to a
							web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
							HTML5 video</a>
						</p>
					</video>
				</div><!--视频播放区域-->
			</div><!--视频区域-->
            <div class="col-sm-12 col-md-4 box-left">
                <div class = 'panel panel-danger'><!--评论区开头-->
                    <div class="panel-heading">评论区</div>
                    <div class="panel-body"><!--与作者显示方式一样 用同样的css样式类-->
                        {% if latest_comment %}
                            {% for comment in latest_comment %}
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="r-info">
                                            <a href="#"><!--点击后到顶端-->
                                                <div class="u-face"><img class="small-headimage" src='/media/{{comment.user.userextraprofile.headimage}}'> </div>
                                            </a>
                                            <div class="usname">
                                                <a href="/homepage/{{ comment.user.id }}" class="name">
                                                 {{ comment.user.userextraprofile.nickName }}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="sign">{{ comment.content }}</div>
                                        <div class="sign">{{ comment.cdate }}</div>
                                    </div>
                                </div>
                            {% endfor %}
                            <a href = 'morecomments/' >view more</a>>
                        {% else %}
                            <div class="">未评论</div>
                        {% endif %}
                    </div>
                </div>
            </div><!--评论区-->
            <div id='checkmsg'/>
            <div class="col-sm-12 col-md-6 box-left">
                <div class="panel panel-danger">
                    <div class="panel-heading">审核视频信息</div>
                    <div class="panel-body">
                        <a href="#">
                         <div class="u-face">
                             <img class="small-headimage" src='/media/{{video.uploader.userextraprofile.headimage}}'>
                         </div>
                        </a>
                        <div class="r-info">
                            <div class="usname">
                                <label>上传者：</label>
                                <a href="/homepage/{{ video.uploader.id }}" class="name">
                                 {{ video.uploader.username }}
                                </a>
                            </div>
                            <div class="m-row">
                                <label for="id_teacher">讲师:</label>
                                <input type="text" class="form-control" placeholder="无标题" id="id_teacher" maxlength="100" name="teacher"
                                       value="{{ video.teacher }}">

                                <label for="id_title">标题</label>
                                <input type="text" class="form-control" placeholder="无标题" id="id_title" maxlength="100" name="title"
                                       value="{{ video.title }}">

                                <label for="id_description">描述</label>
                                <p class="form-control" id="id_description">{{ video.description }}</p>

                                <label for="id_tag">对应知识点</label>
                                <input type="text" class="form-control" placeholder="" id="id_tag" name="tag"
                                       value="{{ video.tag }}">

                                <label for="id_demand">该知识的大纲要求为</label>
                                <input id="id_demand" class ="form-control" name = "demand" value="{{ demand }}">

                                <label for="id_difficulty">知识点难度</label>
                                <select id="id_difficulty" class ="form-control" name = "difficulty">
                                    <option value="0.2">相对大纲要求是基础</option>
                                    <option value="0.6">基本符合大纲要求</option>
                                    <option value="1.0">完全符合大纲要求</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                {% if video.status == 4 %}<!--4:视频未审核-->
                    <button type="button" class="btn btn-success btn-admin" onclick="passvideo(this)">审核通过</button>
                    <!--onclick事件属性属于Mouse事件——由鼠标或类似用户动作触发的事件
                    属性onclick 值script（onclick 发生时运行的浏览器脚本——JS）：元素上发生鼠标点击时触发。-->
                    <button type="button" class="btn btn-danger btn-admin" onclick="banvideo(this)">审核不通过</button>
                    <!--审核不通过也即封禁-->
                {% elif video.status == 0 %}<!--0:视频已审核通过-->
                    <button type="button" class="btn btn-danger btn-admin" onclick="banvideo(this)">封禁视频</button>
                {% elif video.status == 2 %}<!--2:视频已封禁-->
                    <button type="button" class="btn btn-success btn-admin" onclick="unblockvideo(this)">解除视频封禁</button>
                {% endif %}<!--审核or封禁-->
            </div><!--视频信息审核-->
			<div class="col-sm-12 col-md-6 box-left">
            <div class="panel panel-danger">
                <div class="panel-heading">请点击下方的知识树为上传的视频添加知识标签</div>
                <div class="panel-body">

                    <ul class="ztree" id="ztree2"></ul>
                </div>
            </div>
        </div><!--知识标签选择区域-->
		</div>
	</div>
{% endblock %}

{% block extrascripts %}<!--添加额外的浏览器脚本-->
<!--<script type="text/javascript" src="http://vjs.zencdn.net/5.10.7/video.js"></script>-->
<script src="/static/js/video.js"></script>
<script src="/static/js/ajax-send.js"></script>

<script type="text/javascript" src="/static/js/form-check.js"></script>
<script type="text/javascript" src="/static/js/video-upload-form.js"></script>
<script type="text/javascript" src="http://cdn.gbtags.com/ztree/3.5/jquery.ztree.all-3.5.min.js"></script>

<script>

  var setting =
   {
      check: {
        enable: false,
        chkboxType: { "Y": "ps", "N": "ps" }
      },
      data: {
        simpleData: {
          enable: false
        }
      },
      view:{
        showIcon:false,
        nameIsHTML: true
      },
      callback : { //回调函数
            onClick : onClick   //右键事件
        },
    };

    var zTree;
    var treeNodes;

    $(function(){
        $.ajax({
            async : false,
            cache:false,
            type: 'GET',
            dataType : "json",
            url: "/getknowledgenodummy/",//请求的action路径
            error: function () {//请求失败处理函数
                alert('请求失败');
            },
            success:function(data){ //请求成功后处理函数。
                //alert(data);
                treeNodes = data.children;   //把后台封装好的简单Json格式赋给treeNodes
            }
        });
        $.fn.zTree.init($("#ztree2"), setting, treeNodes);
        //zTree = $("#tree").zTree(setting, treeNodes);
    });

    function onClick(event, treeId, treeNode, clickFlag){
        document.getElementById('id_tag').value = treeNode.name;
        document.getElementById('id_demand').value = treeNode.demand;
        //alert(name+"zzz");
    }
</script>

<script>
    function unblockvideo(){
        $.post("unblockvideo/",
            {
                "title":$('#id_title').val(),
                "tag":$('#id_tag').val(),
                "teacher":$('#id_teacher').val(),
                "difficulty":$('#id_difficulty').val()
            },
            function(data){
                layer.msg(data.msg);
            }
        );
    }
    function banvideo(){
        $.post("banvideo/",function(data){
            layer.msg('视频已封禁');
        });
    }
    function passvideo(){
        $.post("auditpassvideo/",
            {
                "title":$('#id_title').val(),
                "tag":$('#id_tag').val(),
                "teacher":$('#id_teacher').val(),
                "difficulty":$('#id_difficulty').val()
            },
            function(data){
                layer.msg(data.msg);
            }
        );
        //document.getElementById('form').submit();
    }
</script>



{% endblock %}